<template>
  <div class="call-incoming">
    <div class="scheme-banner">
      <div class="masen-container">
        <div class="scheme-banner-font">
          <h4>关于玛森</h4>
          <p>
            ——用实力服务每一位客户
          </p>
        </div>
      </div>
    </div>
    <div class="call-first-text">
      <div class="masen-container">
        <div class="scheme-warp-title">
          主要亮点能力一览
        </div>
        <div class="first-text-list">
          <ul>
            <li>
              <div class="text-list-icon">
                <img v-lazy="'/imgs/scheme/call-01.png'" alt="图片一">
              </div>
              <div class="text-list-title">
                场景模版配置
              </div>
              <div class="text-list-info">
                <p>·可视化更直观</p>
                <p>·贴合场景适用</p>
                <p>·多节点定义</p>
                <p>·话术逻辑引导</p>
                <p>·智能语义理解</p>
              </div>
            </li>
            <li>
              <div class="text-list-icon">
                <img v-lazy="'/imgs/scheme/call-01.png'" alt="图片一">
              </div>
              <div class="text-list-title">
                场景模版配置
              </div>
              <div class="text-list-info">
                <p>·可视化更直观</p>
                <p>·贴合场景适用</p>
                <p>·多节点定义</p>
                <p>·话术逻辑引导</p>
                <p>·智能语义理解</p>
              </div>
            </li>
            <li>
              <div class="text-list-icon">
                <img v-lazy="'/imgs/scheme/call-01.png'" alt="图片一">
              </div>
              <div class="text-list-title">
                场景模版配置
              </div>
              <div class="text-list-info">
                <p>·可视化更直观</p>
                <p>·贴合场景适用</p>
                <p>·多节点定义</p>
                <p>·话术逻辑引导</p>
                <p>·智能语义理解</p>
              </div>
            </li>
            <li>
              <div class="text-list-icon">
                <img v-lazy="'/imgs/scheme/call-01.png'" alt="图片一">
              </div>
              <div class="text-list-title">
                场景模版配置
              </div>
              <div class="text-list-info">
                <p>·可视化更直观</p>
                <p>·贴合场景适用</p>
                <p>·多节点定义</p>
                <p>·话术逻辑引导</p>
                <p>·智能语义理解</p>
              </div>
            </li>
          </ul>
        </div>
      </div>
    </div>
    <div class="call-second-text">
      <div class="masen-container">
        <div class="scheme-warp-title">
          更出色的智能表现
        </div>
        <div class="second-text-list">
          <ul>
            <li>
              <h4>极速响应</h4>
              <p>反应速度快，不足1秒极速反馈，能体验与真人一样的聊天体验</p>
              <img src="/imgs/scheme/call-05.png">
            </li>
            <li>
              <h4>极速响应</h4>
              <p>反应速度快，不足1秒极速反馈，能体验与真人一样的聊天体验</p>
              <img src="/imgs/scheme/call-05.png">
            </li>
            <li>
              <h4>极速响应</h4>
              <p>反应速度快，不足1秒极速反馈，能体验与真人一样的聊天体验</p>
              <img src="/imgs/scheme/call-05.png">
            </li>
            <li>
              <h4>极速响应</h4>
              <p>反应速度快，不足1秒极速反馈，能体验与真人一样的聊天体验</p>
              <img src="/imgs/scheme/call-05.png">
            </li>
          </ul>
          <ul>
            <li>
              <h4>极速响应</h4>
              <p>反应速度快，不足1秒极速反馈，能体验与真人一样的聊天体验</p>
              <img src="/imgs/scheme/call-05.png">
            </li>
            <li>
              <h4>极速响应</h4>
              <p>反应速度快，不足1秒极速反馈，能体验与真人一样的聊天体验</p>
              <img src="/imgs/scheme/call-05.png">
            </li>
            <li>
              <h4>极速响应</h4>
              <p>反应速度快，不足1秒极速反馈，能体验与真人一样的聊天体验</p>
              <img src="/imgs/scheme/call-05.png">
            </li>
            <li>
              <h4>极速响应</h4>
              <p>反应速度快，不足1秒极速反馈，能体验与真人一样的聊天体验</p>
              <img src="/imgs/scheme/call-05.png">
            </li>
          </ul>
        </div>
      </div>
    </div>
  </div>
</template>

<script>

export default {
  name: 'callIncoming',
  data() {
    return {

    }
  },
  components: {}
}
</script>

<style lang="scss">
  @import "../assets/scss/mixin.scss";
  @import "../assets/scss/button";
  .call-incoming{
    .scheme-warp-title{
      text-align: center;
      font-size: 30px;
      color: #333333;
      padding-bottom: 40px;
      &:after{
        content: '';
        margin: 30px auto 0px auto;
        @include borderSet(40px,2px);

      }
    }
    .scheme-banner{
      @include bgimg(100%,500px,'/imgs/scheme/scheme-bg-03.png');
      background-size: cover;
      .masen-container{
        .scheme-banner-font{
          color: #FFFFFF;
          margin-top: 170px;
          h4{
            font-size: 48px;
          }
          p{
            margin-top: 30px;
            font-size: 24px;
          }
        }
      }
    }
    .call-first-text{
      padding-top: 80px;
      padding-bottom: 80px;
      background: #F6F6F6;
      .masen-container{

        .first-text-list{
          display: flex;
          ul{
            li{
              background: #ffffff;
              display: inline-block;
              width: 275px;
              border:1px solid #030000;
              margin-right: 30px;
              text-align: center;
              padding: 0px 30px;
              box-sizing: border-box;

              &:last-child{
                margin-right: 0px;
              }
              .text-list-icon{
                padding-top: 38px;

                img{
                  width: 85px;
                  height: 85px;
                  background: #8AE297;
                }
              }
              .text-list-title{
                color: #525252;
                font-size: 30px;
                margin-top: 60px;
                margin-bottom: 60px;
              }
              .text-list-info{
                margin-bottom: 145px;
                p{
                  color: #666666;
                  font-size: 18px;
                  margin-top: 10px;
                }
              }
            }
          }
        }
      }
    }
    .call-second-text{
      padding-top: 80px;
      .masen-container{
        .second-text-list{
          ul{
            display: flex;
            margin-bottom: 15px;
            li{
              width: 275px;
              display: inline-block;
              margin-right: 35px;
              border: 1px solid #030000;
              padding: 0px 35px;
              box-sizing: border-box;
              position: relative;
              h4{
                font-size: 30px;
                margin-top: 34px;
                margin-bottom: 10px;
                color: #525252;
              }
              p{
                font-size: 18px;
                line-height: 30px;
                margin-bottom: 110px;
                color: #666666;
              }
              img{
                position: absolute;
                bottom: 0px;
                right: 0px;
                width: 110px;
              }
              &:last-child{
                margin-right: 0px;
              }
            }
          }
        }
      }
    }
  }

</style>
